import { Button, Card, Checkbox, Form, List, Modal, Select } from "antd";
import type { StyleRulesConfig, RuleLevel } from "./config";
import { useState } from "react";
import { StyleRuleInfo, StyleRuleList } from "./rules";
import { min_app_shell } from '@linksaas-minapp/api';

interface SelectRuleModalProps {
    style?: StyleRulesConfig
    onCancel: () => void;
    onSelect: (rule: StyleRuleInfo) => void;
}

function SelectRuleModal(props: SelectRuleModalProps) {
    const ruleList = StyleRuleList.filter(rule => !(props.style !== undefined && props.style[rule.id] !== undefined));

    return (
        <Modal open title="选择规则" footer={null} onCancel={e => {
            e.stopPropagation();
            e.preventDefault();
            props.onCancel();
        }} bodyStyle={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }}>
            <List rowKey="id" dataSource={ruleList} renderItem={rule => (
                <List.Item>
                    <Card title={<h3>{rule.id}{rule.recommend ? "(推荐规则)" : ""}</h3>}
                        style={{ width: "100%" }}
                        extra={
                            <Button type="link" onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                props.onSelect(rule);
                            }}>选择规则</Button>
                        }>
                        <p>{rule.descCn}</p>
                        <p>{rule.descEn}</p>
                    </Card>
                </List.Item>
            )} />
        </Modal>
    );
}

interface StyleProps {
    style?: StyleRulesConfig;
    onChange: (style: StyleRulesConfig) => void;
}

export default function Style(props: StyleProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <>
            <Form>
                <Form.Item label="使用推荐规则">
                    <Checkbox checked={props.style?.recommended ?? false} onChange={e => {
                        e.stopPropagation();
                        let style = props.style;
                        if (style == undefined) {
                            style = {};
                        }
                        style.recommended = e.target.checked;
                        props.onChange(style);
                    }} />
                </Form.Item>
                <Form.Item label="使用全部规则">
                    <Checkbox checked={props.style?.all ?? false} onChange={e => {
                        e.stopPropagation();
                        let style = props.style;
                        if (style == undefined) {
                            style = {};
                        }
                        style.all = e.target.checked;
                        props.onChange(style);
                    }} />
                </Form.Item>
            </Form>
            <Card bordered={false} title="规则列表" extra={<Button type="primary" onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}>增加规则</Button>}>
                {StyleRuleList.map(rule => (
                    <>
                        {(props.style ?? {})[rule.id] !== undefined && (
                            <Card title={<span>{rule.id}{rule.recommend ? "(推荐规则)" : ""}(<a onClick={e=>{
                                e.stopPropagation();
                                e.preventDefault();
                                min_app_shell.openBrowser(rule.url);
                            }}>规则页面</a>)</span>} extra={
                                <Button type="link" danger onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    if (props.style !== undefined) {
                                        delete props.style[rule.id];
                                        props.onChange(props.style);
                                    }
                                }}>移除规则</Button>
                            } style={{ marginBottom: "10px" }}>
                                <p>{rule.descCn}</p>
                                <p>{rule.descEn}</p>
                                <Form>
                                    <Form.Item label="警告级别">
                                        <Select style={{ width: "100px" }} value={(props.style ?? {})[rule.id] as RuleLevel}
                                            onChange={value => {
                                                let style = props.style;
                                                if (style == undefined) {
                                                    style = {};
                                                }
                                                if (rule.id !== "recommended" && rule.id !== "all") {
                                                    style[rule.id] = value;
                                                }
                                                props.onChange(style);
                                            }}>
                                            <Select.Option value="off">off</Select.Option>
                                            <Select.Option value="warn">warn</Select.Option>
                                            <Select.Option value="error">error</Select.Option>
                                        </Select>
                                    </Form.Item>
                                </Form>
                            </Card>
                        )}
                    </>
                ))}
            </Card>
            {showModal == true && (
                <SelectRuleModal style={props.style}
                    onCancel={() => setShowModal(false)}
                    onSelect={rule => {
                        setShowModal(false);
                        let style = props.style;
                        if (style == undefined) {
                            style = {};
                        }
                        if (rule.id !== "recommended" && rule.id !== "all") {
                            style[rule.id] = "warn";
                        }
                        props.onChange(style);
                    }} />
            )}
        </>
    );
}